<template>
  <a-modal
    :visible="visible"
    title="关联抖音门店"
    :bodyStyle="{
      padding: '20px 60px',
    }"
    :width="700"
    :footer="null"
    @cancel="cancelClick"
    destroyOnClose
  >
    <a-table
      :pagination="false"
      :dataSource="dataSource"
      :columns="columns"
      :loading="loading"
      rowKey="id"
    />
  </a-modal>
</template>

<script>
import { reactive, toRefs, computed, defineComponent, watch } from "vue";
import request from "../../../../common/utils/request";

export default defineComponent({
  name: "TiktokStore",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [Number, String],
      default: 0,
    },
  },
  setup(props, { emit }) {
    const state = reactive({
      count: 0,
      columns: [
        {
          title: "门店名称",
          dataIndex: "store_name",
          key: "store_name",
        },
        {
          title: "门店地址",
          dataIndex: "store_address",
          key: "store_address",
        },
      ],

      page: 1,
      pageSize: 10,
      total: 0,
      dataSource: [],
      loading: false,
    });

    const cancelClick = () => {
      emit("onCancel");
    };

    const pagination = computed(() => ({
      total: state.total,
      current: state.page,
      pageSize: state.pageSize,
      showSizeChanger: true,
    }));

    const handleTableChange = (pager, filters, sorter) => {
      state.page = pager.current;
      state.pageSize = pager.pageSize;
    };

    const getPoiList = () => {
      state.loading = true;
      request
        .get("work_ai", "/user/shotstack/poi/list", {
          merchant_library_id: props.id,
        })
        .then((res) => {
          state.dataSource = res.result;
          state.loading = false;
        })
        .catch(() => {
          state.loading = false;
        });
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          getPoiList();
        }
      }
    );

    return {
      ...toRefs(state),
      cancelClick,
      pagination,
      handleTableChange,
    };
  },
});
</script>

<style lang="scss" scoped></style>
